{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>导航条</li>
  </ol>
<section class="demo-section">
<div id="pageContent">






<section><header><h3>简单导航条</h3></header><article><p>简单导航条没有明显的外观设置，可以方便用于进行个性化定制。</p><p>在导航条 <code>.navbar</code> 内使用 <code>.container-fluid</code> 或 <code>.contianer</code> 来控制导航项目是否居中或者两端对齐。</p><div class="example">
  <nav class="navbar" role="navigation">
    <div class="container-fluid">
      <!-- 导航头部 -->
      <div class="navbar-header">
        <!-- 移动设备上的导航切换按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- 品牌名称或logo -->
        <a class="navbar-brand" href="#">ZUI</a>
      </div>
      <!-- 导航项目 -->
      <div class="collapse navbar-collapse navbar-collapse-example">
        <!-- 一般导航项目 -->
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">项目</a></li>
          <li><a href="#">需求</a></li>
          <li><a href="#">测试</a></li>
          <!-- 导航中的下拉菜单 -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">任务</a></li>
              <li><a href="#">待办</a></li>
              <li><a href="#">Bug</a></li>
              <li class="divider"></li>
              <li><a href="#">用例</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- END .navbar-collapse -->
    </div>
  </nav>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"navigation"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container-fluid"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 导航头部 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-header"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="com">&lt;!-- 移动设备上的导航切换按钮 --&gt;</span><span class="pln">
      </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">".navbar-collapse-example"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sr-only"</span><span class="tag">&gt;</span><span class="pln">切换导航</span><span class="tag">&lt;/span&gt;</span><span class="pln">
        </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-bar"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
        </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-bar"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
        </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-bar"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
      </span><span class="tag">&lt;/button&gt;</span><span class="pln">
      </span><span class="com">&lt;!-- 品牌名称或logo --&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-brand"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">ZUI</span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 导航项目 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse navbar-collapse navbar-collapse-example"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="com">&lt;!-- 一般导航项目 --&gt;</span><span class="pln">
      </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav navbar-nav"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">项目</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">需求</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        ...
        </span><span class="com">&lt;!-- 导航中的下拉菜单 --&gt;</span><span class="pln">
        </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">管理 </span><span class="tag">&lt;b</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/b&gt;&lt;/a&gt;</span><span class="pln">
          </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">任务</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
            ...
          </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="com">&lt;!-- END .navbar-collapse --&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/nav&gt;</span></code></pre></article></section>




<section><header><h3>默认导航条</h3></header><article><p><code>.navbar-default</code></p><div class="example">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <!-- 导航头部 -->
      <div class="navbar-header">
        <!-- 移动设备上的导航切换按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- 品牌名称或logo -->
        <a class="navbar-brand" href="#">ZUI</a>
      </div>
      <!-- 导航项目 -->
      <div class="collapse navbar-collapse navbar-collapse-example">
        <!-- 一般导航项目 -->
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">项目</a></li>
          <li><a href="#">需求</a></li>
          <!-- 导航中的下拉菜单 -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">任务</a></li>
              <li><a href="#">待办</a></li>
              <li><a href="#">Bug</a></li>
              <li class="divider"></li>
              <li><a href="#">测试</a></li>
              <li><a href="#">用例</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- END .navbar-collapse -->
    </div>
  </nav>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar navbar-default"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"navigation"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/nav&gt;</span></code></pre></article></section>




<section><header><h3>深色导航条</h3></header><article><p><code>.navbar-inverse</code></p><div class="example">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <!-- 导航头部 -->
      <div class="navbar-header">
        <!-- 移动设备上的导航切换按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- 品牌名称或logo -->
        <a class="navbar-brand" href="#">ZUI</a>
      </div>
      <!-- 导航项目 -->
      <div class="collapse navbar-collapse navbar-collapse-example">
        <!-- 一般导航项目 -->
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">项目</a></li>
          <li><a href="#">需求</a></li>
          <!-- 导航中的下拉菜单 -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">任务</a></li>
              <li><a href="#">待办</a></li>
              <li><a href="#">Bug</a></li>
              <li class="divider"></li>
              <li><a href="#">测试</a></li>
              <li><a href="#">用例</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- END .navbar-collapse -->
    </div>
  </nav>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar navbar-inverse"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"navigation"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/nav&gt;</span></code></pre></article></section>



<section><header><h3>使用表单元素</h3></header><article><div class="example">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <!-- 导航头部 -->
      <div class="navbar-header">
        <!-- 移动设备上的导航切换按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- 品牌名称或logo -->
        <a class="navbar-brand" href="#">ZUI</a>
      </div>
      <!-- 导航项目 -->
      <div class="collapse navbar-collapse navbar-collapse-example">
        <!-- 一般导航项目 -->
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">项目</a></li>
          <li><a href="#">需求</a></li>
          <!-- 导航中的下拉菜单 -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">任务</a></li>
              <li><a href="#">待办</a></li>
              <li><a href="#">Bug</a></li>
              <li class="divider"></li>
              <li><a href="#">测试</a></li>
              <li><a href="#">用例</a></li>
            </ul>
          </li>
        </ul>
        <!-- 导航中的表单 -->
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="搜索">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
      </div><!-- END .navbar-collapse -->
    </div>
  </nav>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar navbar-default"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"navigation"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container-fluid"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-header"</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse navbar-collapse navbar-collapse-example"</span><span class="tag">&gt;</span><span class="pln">
      ...
      </span><span class="com">&lt;!-- 导航中的表单 --&gt;</span><span class="pln">
      </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-form navbar-left"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"search"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"搜索"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">搜索</span><span class="tag">&lt;/button&gt;</span><span class="pln">
      </span><span class="tag">&lt;/form&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/nav&gt;</span></code></pre></article></section>



<section><header><h3>将内容放置与导航右侧</h3></header><article><div class="example">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <!-- 导航头部 -->
      <div class="navbar-header">
        <!-- 移动设备上的导航切换按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- 品牌名称或logo -->
        <a class="navbar-brand" href="#">ZUI</a>
      </div>
      <!-- 导航项目 -->
      <div class="collapse navbar-collapse navbar-collapse-example">
        <!-- 一般导航项目 -->
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">项目</a></li>
          <li><a href="#">需求</a></li>
          <!-- 导航中的下拉菜单 -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">任务</a></li>
              <li><a href="#">待办</a></li>
              <li><a href="#">Bug</a></li>
              <li class="divider"></li>
              <li><a href="#">测试</a></li>
              <li><a href="#">用例</a></li>
            </ul>
          </li>
        </ul>
        <!-- 右侧的导航项目 -->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">帮助</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">探索 <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">敏捷开发</a></li>
              <li><a href="#">HTML5</a></li>
              <li><a href="#">Javascript</a></li>
              <li class="divider"></li>
              <li><a href="#">探索宇宙</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- END .navbar-collapse -->
    </div>
  </nav>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar navbar-default"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"navigation"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container-fluid"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 导航头部 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-header"</span><span class="tag">&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 导航项目 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse navbar-collapse navbar-collapse-example"</span><span class="tag">&gt;</span><span class="pln">
      ...
      </span><span class="com">&lt;!-- 右侧的导航项目 --&gt;</span><span class="pln">
      </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav navbar-nav navbar-right"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">帮助</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">探索 </span><span class="tag">&lt;b</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/b&gt;&lt;/a&gt;</span><span class="pln">
          </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">敏捷开发</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">HTML5</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">Javascript</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url"</span><span class="tag">&gt;</span><span class="pln">探索宇宙</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
          </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="com">&lt;!-- END .navbar-collapse --&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/nav&gt;</span></code></pre></article></section>






<script>
function afterPageLoad() {
    $('#pageContent').on('click', '.navbar-nav > li > a', function() {
        var $item = $(this).parent('li');
        $item.parent().children('.active').removeClass('active');
        $item.addClass('active');
    });
}
</script><section><header><h3>自适应宽度</h3></header><article><p>在<code>.nav</code>上添加<code>.nav-justified</code>。</p><div class="example">
  <nav class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav nav-justified">
      <li><a href="###">首页</a></li>
      <li><a href="###">项目</a></li>
      <li class="active"><a href="###">需求</a></li>
      <li><a href="###">测试</a></li>
      <li><a href="###">任务</a></li>
      <li><a href="###">论坛</a></li>
      <li><a href="###">帮助</a></li>
      <li><a href="###">探索</a></li>
    </ul>
  </nav>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar navbar-default"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"navigation"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav navbar-nav nav-justified"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url/1"</span><span class="tag">&gt;</span><span class="pln">首页</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url/2"</span><span class="tag">&gt;</span><span class="pln">项目</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"your/nice/url/3"</span><span class="tag">&gt;</span><span class="pln">需求</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/nav&gt;</span></code></pre><div class="alert">示例中当点击导航条目并应用高亮样式的效果是为演示方便有意添加的，并非导航自身交互功能。你仍然可以手动为导航 <code>.nav</code> 中的 <code>li</code> 添加 <code>.active</code> CLASS 来启用或移除高亮样式效果。</div></article></section></div>
</section>
{/block}